<template>
  <div>
    用户中心
    <div id="box">
      <div class="child">content</div>
      <div>
        <el-button
          plain
          size="large"
          icon="el-icon-full-screen"
          type="primary"
          @click="numScanCode"
        >样品扫码</el-button>
      </div>
      <!-- 扫码界面 -->
      <div v-if="scanDialogVisible">
        <el-dialog
          :visible.sync="scanDialogVisible"
          append-to-body
          title="扫码"
          width="70%"
          @close="scanClose"
        >
          <scanCodePage ref="scanRef" @scanEnd="scanEnd"></scanCodePage>
        </el-dialog>
      </div>
      <el-button @click="open">打开子组件</el-button>
      <div v-if="dialogVisible">
        <el-dialog :visible.sync="dialogVisible" append-to-body title="测试" width="70%">
          <son v-model="sonVal" @click="sonEvent"></son>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import scanCodePage from "@/components/scanCodePage";
import son from "./son";
export default {
  components: { scanCodePage, son },
  data() {
    return {
      scanDialogVisible: false, //弹出框
      dialogVisible: false,
      sonVal : {
        name : '测试',
        msg : "hello"
      }
    };
  },
  methods: {
    //数量扫码按钮
    numScanCode() {
      console.log(222);
      this.scanDialogVisible = true;
    },
    //扫码成功:参数：扫码结果，扫码类型（开始、结束...）
    async scanEnd(scanTex) {
      console.log("扫码成功数据", scanTex);
    },
    //扫码弹窗关闭
    scanClose() {
      this.$refs.scanRef.$destroy();
    },
    open() {
      this.dialogVisible = true;
    },
    sonEvent(val){
      console.log(val);
    }
  }
};
</script>
<style scoped>
#box {
  height: 200px;
  background: red;
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  background-color: aqua;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}
</style>

